<template>
  <div class="w-data-screen">
    <main class="big-screen" id="big-screen" :class="allScreenValue ? 'fixedScreen' : ''">
      <div class="screen-title">
        <span class="title-style">睢宁县鸿福育菇房自动化控制</span>
      </div>
      <section class="d-flex">
        <screen-Left></screen-Left>
        <screen-center />
        <screen-right />
      </section>
    </main>
    <div id="full-screen" class="screenIcon" @click="allScreen" :class="!allScreenValue ? 'inScreen' : 'outScreen'"></div>
  </div>
</template>
<script lang="ts" setup>
import screenLeft from './../components/screen-left.vue';
import screenCenter from './../components/screen-center.vue';
import screenRight from './../components/screen-right.vue';
import { ref } from 'vue';
//睢宁县鸿福育菇房自动化控制系统
const allScreenValue = ref(false);
const allScreen = () => {
  allScreenValue.value = !allScreenValue.value;
  if (allScreenValue.value) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};

document.addEventListener('fullscreenchange', () => {
  let htmlElement = document.fullscreenElement;
  if (htmlElement) {
    allScreenValue.value = true;
  } else {
    allScreenValue.value = false;
  }
});
</script>
<style lang="scss" scoped>
.big-screen {
  background: url('./../assets/big-screen.png') no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  transform-origin: left top;
  padding: 89px 23px 0 45px;
}
.screen-title {
  position: absolute;
  background: url('./../assets/nav.png') no-repeat;
  background-size: 100% 100%;
  width: 1873px;
  height: 47px;
  left: 24px;
  top: 38px;
  text-align: center;
}
.w-data-screen {
  width: calc(100% - 0px);
  height: calc(100vh - 64px);
  overflow: hidden;
  position: relative;
}
.title-style {
  width: 545px;
  height: 37px;
  font-size: 36px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  top: -22px;
}
.screenIcon {
  width: 26px;
  height: 26px;
  position: fixed;
  top: 72px;
  right: 20px;
  cursor: pointer;
}
.inScreen {
  background-image: url(./../assets/icon-fullscreen.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.outScreen {
  background-image: url(./../assets/icon-exit.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 12px;
}
.fixedScreen {
  position: fixed;
  left: 0;
  top: 0;
}
#search {
  margin-left: 14px;
}
</style>
